<template>
  <div>
    <div id="amount-input-box">
      <label><slot>金额：</slot></label>
      <el-input
        placeholder="请输入金额"
        class="input-with-select"
        style="width: 450px"
        v-model="num"
        @input="(e) => NumberToChinese(e)"
      />
      <p class="chinese-amount">{{ text }}</p>
    </div>
  </div>
</template>
<script>
import { NumToSimplifiedChinese } from "learn_dennis_js";

export default {
  name: "BankAmountInput",
  props: {},
  data() {
    return {
      text: "",
      num: "",
    };
  },
  methods: {
    NumberToChinese(m) {
      if (m === "") {
        this.text = "";
        this.num = "";
      }
      if (!/^(([0-9]|([1-9][0-9]{0,12}))((\\.[0-9]{1,2})?))$/.test(m)) {
        this.num = this.correctNum;
        this.text = this.correctText;
        return;
      }
      if (m.length > 16) {
        this.text = this.correctText;
        this.num = this.correctNum;
        return;
      }
      this.correctText = this.text;
      this.correctNum = m;
      this.text = NumToSimplifiedChinese(m);
      console.log(this.text, "text");
    },
  },
};
</script>
<style lang="less" scoped>
#amount-input-box {
  display: flex;
  align-items: center;
  position: relative;
  .chinese-amount {
    position: absolute;
    left: 50px;
    top: 30px;
  }
}
</style>
